<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'picker-view'})}`"></div>
	<onekit-view onekit-class="page-body">
		<onekit-view onekit-class="selected-date">{{year}}年{{month}}月{{day}}日{{isDaytime ? "白天" : "夜晚"}}</onekit-view>
		<onekit-picker-view onekit-style="width: 100%; height: 300px;" indicator-style="height: 50px;" :value="value" @Change="bindChange">
			<onekit-picker-view-column>
				<onekit-view v-for="item in years" :key="item.years" onekit-style="line-height: 50px; text-align: center;">{{item}}年</onekit-view>
			</onekit-picker-view-column>
			<onekit-picker-view-column>
				<onekit-view v-for="item in months" :key="item.months" onekit-style="line-height: 50px; text-align: center;">{{item}}月</onekit-view>
			</onekit-picker-view-column>
			<onekit-picker-view-column>
				<onekit-view v-for="item in days" :key="item.days" onekit-style="line-height: 50px; text-align: center;">{{item}}日</onekit-view>
			</onekit-picker-view-column>
			<onekit-picker-view-column>
				<onekit-view onekit-class="icon-container">
					<onekit-image onekit-class="picker-icon" src="../../resources/kind/daytime.png"></onekit-image>
				</onekit-view>
				<onekit-view onekit-class="icon-container">
					<onekit-image onekit-class="picker-icon" src="../../resources/kind/night.png"></onekit-image>
				</onekit-view>
			</onekit-picker-view-column>
		</onekit-picker-view>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../../page/common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../../page/common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "picker-view",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../../weixin2vue/wx.js';
import Macro from '../../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../../weixin2vue/OnekitComponent.js';
const date = new Date();
const years = [
];
const months = [
];
const days = [
];
for(let i = 1990;i <= date.getFullYear();i++){
  years.push(i);
};
for(let i = 1;i <= 12;i++){
  months.push(i);
};
for(let i = 1;i <= 31;i++){
  days.push(i);
};
export default Page(ONEKIT_JSON,["year","年","month","月","day","日","isDaytime","value","years","months","days"],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'picker-view',
        "path":'page/component/pages/picker-view/picker-view'
};
    },
    "data":{
        years,
        "year":date.getFullYear(),
        months,
        "month":2,
        days,
        "day":2,
        "value":[
          9999,
          1,
          1
        ],
        "isDaytime":true
},
    "bindChange"(e){
      const val = e.detail.value;
      this.setData({
        "year":this.data.years[val[0]],
        "month":this.data.months[val[1]],
        "day":this.data.days[val[2]],
        "isDaytime":!val[3]
});
    }
});

</script>
<style 
 lang="css">
.selected-date {
  text-align: center ;
  margin: 15px ;
}
.icon-container {
  display: flex ;
  flex-direction: column ;
  justify-content: center ;
  align-items: center ;
}
.picker-icon {
  width: 25px ;
  height: 25px ;
}
</style>